<template>
    <div>
        <basic-layout title="系统公告" :showAddBtn="false">
            <div class="columnFlex">
                <!-- 查询条件 -->
                <van-row class="search-row">
                    <van-search v-model="formData.title" maxlength="20" show-action label="" placeholder="公告标题" @search="onRefresh">
                        <template #action>
                            <div @click="onRefresh">搜索</div>
                        </template>
                    </van-search>
                </van-row>
                <!-- 列表 -->
                <van-row class="listCon">
                    <van-pull-refresh class="pullRefresh" v-model="refreshLoading" @refresh="onRefresh">
                        <van-list
                            v-model="loading"
                            :finished="finished"
                            :finished-text="listData.length ? '没有更多了' : ''"
                            @load="onLoad"
                        >
                        <van-swipe-cell v-for="val in listData" :key="val.noticeId">
                            <div class="cellContent" @click="handleDetail(val)">
                                <div class="top">
                                    <div class="flexTit">
                                        <p class="title">{{ val.title }}</p>
                                        <p class="other">
                                            <span>
                                                <a v-if="val.readStatus === '1'">●</a>
                                                {{val.readStatusName}}
                                            </span>
                                        </p>
                                    </div>
                                    <!-- <p>
                                        <span class="label">公告内容：</span>
                                        <span v-html="val.content"></span>
                                    </p> -->
                                    <p>
                                        <span class="label">重要程度：</span>
                                        <span>{{ val.importanceName }}</span>
                                    </p>
                                    <p>
                                        <span class="label">发送人：</span>
                                        <span>{{ val.senderName }}</span>
                                    </p>
                                    <p>
                                        <span class="label">发送时间：</span>
                                        <span>{{ val.sendTime }}</span>
                                    </p>
                                </div>
                            </div>
                        </van-swipe-cell>
                        </van-list>
                        <van-empty v-if="!loading && !listData.length" class="custom-image" :image="require('../../../assets/images/empty.png')" description="暂无数据" />
                    </van-pull-refresh>
                </van-row>
            </div>
        </basic-layout>
        <!-- 详情 弹出框 -->
        <fullscreenModal :modal="fullscreenModal" :isAdd="false" label="系统公告" :isShowEdit="false" editType="detail" @handleClose="fullscreenModal = false">
            <detail ref="detailRef"></detail>
        </fullscreenModal>
        <full-loading v-if="fullLoading"></full-loading>
    </div>
</template>

<script>
    import { queryMyNotices, queryNoticeDetail, setNoticeRead } from '@/api/platframe/sysNotice';
    export default {
        data () {
            return {
                loading: false,
                finished: false,
                refreshLoading: false,
                fullscreenModal: false,
                fullLoading: false,
                formData: {
                    title: '',
                    msgType: '101',
                    pageNum: 1,
                    pageSize: 20
                },
                listData: []
            };
        },
        created () {
            this.getListData();
        },
        methods: {
            // 获取列表数据
            getListData () {
                if (this.formData.title && !this.$commonReg.textReg.test(this.formData.title)) {
                    this.$Notify({ type: "warning", message: `公告标题${this.$commonReg.textMsg}` });
                    return;
                }
                this.loading = true;
                queryMyNotices(this.formData).then((res) => {
                    this.loading = false;
                    if (res.code === 1000 && res.data) {
                        this.listData = [...this.listData, ...res.data.records];
                        if (this.listData.length >= res.data.total) {
                            this.finished = true;
                        }
                    } else {
                        this.finished = true;
                    }
                }).catch(() => {
                    this.loading = false;
                    this.finished = true;
                });
            },
            onRefresh() {
                this.refreshLoading = false;
                this.finished = false;
                this.listData = [];
                this.formData.pageNum = 1;
                this.getListData();
            },
            onLoad () {
                this.formData.pageNum++;
                this.getListData();
            },
            // 查看详情
            handleDetail (item) {
                this.fullscreenModal = true;
                this.fullLoading = true;
                queryNoticeDetail(item.noticeId).then(res => {
                    this.fullLoading = false;
                    if (res.code === 1000 && res.data) {
                        let obj = [];
                        if (res.data.receiverType === '2') { // 全员
                            obj = [
                                {
                                    title: '接收对象',
                                    prop: 'receiverTypeName',
                                    value: res.data.receiverTypeName
                                },
                                {
                                    title: '接收组织',
                                    prop: 'orgName',
                                    value: res.data.orgName
                                },
                                {
                                    title: '是否包含下级',
                                    prop: 'subFlagName',
                                    value: res.data.subFlagName,
                                }
                            ]
                        } else {
                            obj = [
                                {
                                    title: '接收对象',
                                    prop: 'receiverTypeName',
                                    value: res.data.receiverTypeName
                                }
                            ]
                        }
                        let detailInfo = [
                            {
                                title: '公告标题',
                                prop: 'title',
                                value: res.data.title
                            },
                            {
                                title: '公告内容',
                                prop: 'content',
                                value: res.data.content
                            },
                            {
                                title: '重要程度',
                                prop: 'importanceName',
                                value: res.data.importanceName
                            },
                            {
                                title: '发送人',
                                prop: 'senderName',
                                value: res.data.senderName
                            },
                            {
                                title: '发送时间',
                                prop: 'sendTime',
                                value: res.data.sendTime
                            },
                            ...obj,
                            {
                                title: '有效截止时间',
                                prop: 'validEndTime',
                                value: res.data.validEndTime
                            }
                        ];
                        this.$refs.detailRef.getData(detailInfo);
                    }
                }).catch(() => {
                    this.fullLoading = false;
                })
                // 设置未读公告为已读
                if (item.readStatus === '1') {
                    setNoticeRead(item.noticeId).then(res => {
                        if (res.code === 1000) {
                            this.onRefresh();
                        }
                    })
                }
            }
        },
    };
</script>

<style scoped lang="less">
    .listCon {
        .cellContent {
            padding: 10px;
            box-sizing: border-box;
        }
        .other {
            font-size: 10px;
            color: #999;
            a {
                color: rgb(250, 7, 7);
            }
        }
    }
</style>